<template>
  <div>
    <h4 class="boardName" @click="gotoThat">
      订单任务
      <a-icon type="right" />
    </h4>
    <div class="lightBox setBox">
      <ul v-if="list.length > 0" style="padding:8px 0">
        <li class="taskli" v-for="(item, index) in list" :key="index + 'a'">
          <div style="width: 60%;overflow: hidden;float: left">
            <div class="tasktop">
              <span class="tasktopname">{{ item.taskName }}</span>
              <span
                class="tasktopstatus"
              >{{ item.status == 1 ? '进行中' : item.status == 2 ? '已完成' : '未完成' }}</span>
            </div>
            <div class="taskPRO">
              <div class="progress">
                <span class="progressnum">{{ item.planCount }}</span>
                <!--  计划数量-->
                <div
                  class="progressPlan"
                  :style="{ width: ((item.nowPlanCount / item.planCount) * 100).toFixed(2) + '%' }"
                >
                  <span class="progressPlannum">{{ item.nowPlanCount }}</span>
                </div>
                <!-- 完成数量-->
                <div
                  class="progressIn"
                  :style="{
                    width: ((item.nowActualCount / item.planCount) * 100).toFixed(2) + '%',
                    background: item.nowPlanCount > item.nowActualCount ? '#D65B4A' : '#66B92E',
                  }"
                >
                  <span
                    class="progressInnum"
                    :style="{ color: item.nowPlanCount > item.nowActualCount ? '#D65B4A' : '#66B92E' }"
                  >{{ item.nowActualCount }}</span>
                </div>
              </div>
            </div>
            <div>
              <div class="taskMsg">
                <div>
                  <h4>{{ item.productName }}</h4>
                  <p>工件名称</p>
                </div>
                <div>
                  <h4>{{ item.planCount }}件</h4>
                  <p>计划完成数</p>
                </div>
                <div>
                  <h4>{{ item.endTime }}</h4>
                  <p>计划完成时间</p>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 40%;float: right;">
            <pieCharts
              v-if="item.pieData.length > 0"
              :chartData="item.pieData"
              :height="'160px'"
              :titleShow="true"
              :chartColor="chartColor"
              :value="item.pieDataValue"
            />
            <div class="taskPieChart">
              <span>领料数</span>
              <span class="colorin">{{ item.pickCount }}件</span>
              <span>产出数</span>
              <span class="colorin">{{ item.nowActualCount }}件</span>
              <span>废料</span>
              <span class="colorin">{{ item.wasterCount }}件</span>
            </div>
          </div>
        </li>
      </ul>
      <a-empty style="margin-top:130px" v-else />
    </div>
  </div>
</template>

<script>
import pieCharts from '../../../echartsCom/pieCharts.vue';

let chartColor = ['#289DF5', '#FDBA00', '#3FC529'];
export default {
  name: 'index',
  props: {
    AllTaskLSIT: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    AllTaskLSIT(val) {
      this.AllTaskfilter(val);
      // return val
    },
  },
  components: {
    pieCharts,
  },
  data() {
    return {
      pieData: [
        { value: '24', name: '产出' },
        { value: '2', name: '废件' },
      ],
      chartColor: chartColor,
      list: [],
    };
  },
  methods: {
    gotoThat() {
      this.$store.commit('board/HeadNavType', 2);
      localStorage.setItem('navType', 2);
      this.$router.push('/orderDetail');
    },
    AllTaskfilter(val) {
      console.log(val);
      this.list = [];
      val.forEach((item) => {
        item.pieData = [
          { value: item.nowActualCount, name: '产出' },
          { value: item.pickCount, name: '领料' },
          { value: item.wasterCount, name: '废料' },
        ];

        item.pieDataValue = (((item.nowActualCount - item.wasterCount) / item.pickCount) * 100).toFixed(2);
      });

      this.list = val;
    },
  },
};
</script>

<style scoped lang="less">
.setBox {
  margin-top: 2px;
  height: 422px;
  padding: 20px;
  overflow-y: auto;
}
@import '../../light.less';
</style>
